<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<style>
.ui-menu {
	width: 200px;
	position: absolute;
}
</style>
<script type="text/javascript">
	var GLOBAL_storeMain = new StoreMain();
	var GLOBAL_storeSelected = null;
	$(document).ready(function() {
		// init content
		GLOBAL_storeMain.init();
	});

	function StoreMain() {
		var _this = this;
		//var _settings = null;

		this.init = function() {
			//set spinners
			$(".grid").html(GLOBAL_Spinner);
			$(".side-bar").html(GLOBAL_Spinner);
			this.initControls();
			this.callList();
			//this.callStoreStatistics();
		};

		/**
		 * INIT CONTROLS
		 */
		this.initControls = function() {
			//init buttons
			$("#createBtn").button({
				icons : {
					primary : "ui-icon-plusthick"
				},
				text : false
			}).click(function() {
				var settings = {
					"title" : "Create Store",
					"width" : 800,
					"height" : 400,
					"buttons" : {
						'Create' : function() {
							if (GLOBAL_storeCreate.create()) {
								$(this).dialog('close');
							}
						},
						Cancel : function() {
							$(this).dialog('close');
						}
					},
					"onClose" : function() {
						//
					}
				};
				var modal = new Modal(settings);
				modal.open();
				settings = {
					"url" : "jsp/store/edit.jsp",
					"params" : ""
				};
				modal.load(settings);
			});
		};

		/**
		 * Call Store list
		 */
		this.callList = function() {
			var settings = {
				"body" : $('.grid'),
				"url" : "getStores",
				"responseFunc" : _this.responseCallList
			};
			Call(settings);
		};

		this.callStoreStatistics = function() {
			var settings = {
				"body" : $('.side-bar'),
				"url" : "",
				"params" : "",
				"responseFunc" : _this.responseCallStoreStatistics
			};
			//Call(settings);
		};

		/**
		 * Reseponse Call list
		 */

		this.responseCallList = function(data) {
			if (data == null || data == undefined)
				return /* Handle error*/;
			$(".grid").html("");

			//if no items returned
			if (data.list.length == 0) {
				$(".grid").html("Nu sint elemente. SQL: +100");
				return;
			}

			var settings = {
				"id" : "idStoreGrid",
				"rootPanel" : $('.grid'),
				"name" : "Stores",
				"title" : "Store list",
				"head" : [ {
					"name" : "",
					"title" : "",
					"width" : "20px"
				}, {
					"name" : "",
					"title" : "",
					"width" : "20px"
				}, {
					"name" : "Id",
					"title" : "",
					"width" : "30px"
				}, {
					"name" : "Name",
					"title" : "Store name",
					"width" : "200px"
				}, {
					"name" : "Type",
					"title" : "Store type",
					"width" : "100px"
				} ]
			};
			var storeGrid = new Grid(settings);
			for ( var i = 0; i < data.list.length; i++) {
				// get store type
				var storeType = _this.getStoreTypeName(data.list[i].storeType);
				var rowSettings = {
					"height" : "20px",
					"rowData" : data.list[i],
					"columns" : [ {
						"text" : _this.createMenu()
					// create menu
					}, {
						"text" : "" // get status
					}, {
						"text" : data.list[i].id
					// id
					}, {
						"text" : data.list[i].name
					// name
					}, {
						"text" : storeType
					// store type
					} ]
				};
				var $row = storeGrid.addElement(rowSettings);
				$row.click(function() {
					_this.viewStore();
				});
			}
			$(".grid").append(storeGrid);
		};

		this.getStoreTypeName = function(list) {
			var type = "";
			if (list.length == 0)
				return type;
			type = list[0].name;
			return type;
		};

		this.createMenu = function() {
			var $menu = $('<div>');
			var $img = $('<img>', {
				"alt" : "M",
				"src" : "resources/icons/icon/menu16.png",
				"title" : "Menu"
			}).css({
				"cursor" : "default"
			});
			$img.contextMenu({
				menu : 'storeMenu'
			}, function(action, el, pos) {
				switch (action) {
				case 'view':
					_this.viewStore();
					break;
				case 'edit':
					_this.editStore();
					break;
				case 'delete':
					_this.deleteStore();
					break;
				case 'close':
					break;
				}
			}).click(
					function(event) {
						GLOBAL_storeSelected = strToJson($(this)
								.closest('.row').attr('rowData'));
						event.stopPropagation();
					});
			$menu.append($img);
			return $menu;
		};

		this.viewStore = function() {
			var settings = {
				"title" : "Store detail",
				"width" : 800,
				"height" : 400
			};
			var modal = new Modal(settings);
			modal.open();
			settings = {
				"url" : "jsp/store/view.jsp",
				"params" : ""
			};
			modal.load(settings);
		};

		this.editStore = function() {
			var settings = {
				"title" : "Edit Store",
				"width" : 800,
				"height" : 400,
				"buttons" : {
					'Save' : function() {
					},
					Cancel : function() {
						$(this).dialog('close');
					}
				},
				"onClose" : function() {
					//
				}
			};
			var modal = new Modal(settings);
			modal.open();
			settings = {
				"url" : "jsp/store/edit.jsp",
				"params" : ""
			};
			modal.load(settings);
		};

		this.deleteStore = function() {
			var settings = {
				"title" : "Delete Store",
				"width" : 300,
				"height" : 170,
				"buttons" : {
					'Confirm' : function() {
						var data = {
							"model.id" : GLOBAL_storeSelected.id
						};

						var settings = {
							"body" : $('.grid'),
							"url" : "deleteStore",
							"params" : data,
							"responseFunc" : _this.responseDeleteStore
						};
						Call(settings);
						$(this).dialog('close');
					},
					Cancel : function() {
						$(this).dialog('close');
					}
				},
				"onClose" : function() {
					//
				}
			};
			var modal = new Modal(settings);
			var htmlContent = "<p class='red'>Confirmation delete store!</p>";
			if (GLOBAL_storeSelected != null)
				htmlContent += GLOBAL_storeSelected.name;
			modal.html(htmlContent);
			modal.open();
		};

		this.responseDeleteStore = function(data) {
			_this.callList();
		};

		this.responseCallStoreStatistics = function(data) {
			if (data == null || data == undefined)
				return /* Handle error*/;
			$(".side-bar").html("");//
			$(".side-bar").html("Total items: " + data.list.length);
		};

	}
</script>

<!-- MAIN LAYOUT -->
<div id="storeMain">
	<div class="container">
		<div class="options">
			<a id="createBtn" title="Create store">&#160;</a>
		</div>
		<div class="grid" style="width: 740px; max-width: 740px;"></div>
		<div class="side-bar">side-bar</div>
	</div>
</div>

<!-- MODAL -->

<!-- CONTEXT MENU -->
<ul id="storeMenu" class="contextMenu">
	<li class="icon-view"><a href="#view">View</a></li>
	<li class="icon-edit"><a href="#edit">Edit</a></li>
	<li class="icon-delete"><a href="#delete">Delete</a></li>
	<li><div class="hr"></div></li>
	<li class="icon-opened"><a href="#close">Open</a></li>
	<li class="icon-process"><a href="#">In process</a></li>
	<li class="icon-planned"><a href="#">Planned</a></li>
	<li class="icon-closed"><a href="#close">Close</a></li>
</ul>